<template>
  <div :class="['header', isFixed ? 'header-fixed' : '']">
    <a class="left">
      <img src="static/logo.png" alt class="logo pointer" @click="toHomePage" v-if="!isFixed" />
      <img src="static/darklogo.png" alt class="logo pointer" @click="toHomePage" v-else />
    </a>
    <div class="right">
      <router-link to="/">首页</router-link>
      <router-link to="/solution">解决方案</router-link>
      <span @click="login">登录</span>
      <span class="register" @click="register">注册</span>
    </div>
    <register-dialog ref="registerDialog"></register-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import { VerifySlider } from 'vue-verify-slider'
import RegisterDialog from '@/components/RegisterDialog'
export default {
  components: {
    RegisterDialog,
    VerifySlider
  },
  data() {
    return {
      isFixed: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    login() {
      const href = 'http://l-test19.dev.cn2.corp.agrant.cn:9990/#/login?relogin="true"'
      window.open(href, '_blank')
    },
    // 返回首页
    toHomePage() {
      this.$router.push('/')
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop // 滚动条偏移量
      let offsetTop = 10 // 要滚动到顶部吸附的元素的偏移量
      this.isFixed = scrollTop > offsetTop // 如果滚动到顶部了，this.isFixed就为true
    },
    setPassword(value) {
      this.form.password = value
    },
    register() {
      this.$refs.registerDialog.registerDialogVisible = true
      this.getAccessToken()
    },
    getAccessToken() {
      const params = {
        pid: 210
      }
      axios.post(this.$service.getAccessToken, params, {
        headers: {
          'X-NAME': 'smanage',
          'X-PASSWORD': '71ad3b8f53491648d4074bdebdda7ab0'
        }
      }).then(res => {
        this.$cookie.set('token', res.data.data.token)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/scss/_common.scss';
.header {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  height: 0.64rem;
  font-size: 14px;
  font-family: $pfm;
  font-weight: 500;
  background: $main;
  .title {
    text-align: center;
  }
  img {
    height: 0.18rem;
  }
  a {
    color: $ff;
    text-decoration: none;
    &:nth-of-type(2) {
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 0.2rem;
        background: rgba(255, 255, 255, 0.47);
        position: absolute;
        top: 0.1rem;
        right: -0.4rem;
      }
    }
  }
  span {
    color: #fff;
  }
  .left {
    margin-right: 6.17rem;
  }
  .right {
    height: 0.4rem;
    line-height: 0.4rem;
    flex: 1;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    .register {
      display: inline-block;
      width: 0.8rem !important;
      height: 0.32rem;
      line-height: 0.32rem;
      margin-top: 0.04rem;
      text-align: center;
      background: $btn;
      color: $ff;
      border-radius: 0.02rem;
    }
    .router-link-exact-active {
      border-bottom: 4px solid $btn;
    }
  }
}
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: $ff;
  a {
    color: rgba(0, 0, 0, 0.85);
    &:nth-of-type(2) {
      &::after {
        background: rgba(0, 0, 0, 0.06);
      }
    }
  }
  span {
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
